<template>
  <div
    class="pageset"
    v-loading="loading"
    element-loading-background="rgba(255, 255, 255, 0)"
  >
    <el-form ref="form" :model="details" label-width="100px">
      <el-form-item label="活动模板">
        <div class="templateImg common_bg" @click="handleChangeModel">
          <el-image :src="img" fit="cover" v-if="img"></el-image>
          <!-- 根据模板templateId展示模板图片 -->
          <div class="tips_wrap">
            <span class="name" @click="handleTemp">切换模板</span>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="配色">
        <div class="colorCircle">
          <div
            v-for="(item, i) in color_list"
            :key="i"
            @click="handleSelectColor(item)"
            class="color_item"
            :style="`backgroundColor:${item}`"
          >
            <i class="el-icon-check" v-if="item === details.theme"></i>
          </div>
        </div>
        <div class="btn_wrap">
          <div class="default btn" @click="handleDefaultColor">默认</div>
          <div class="custom btn" :style="{ background: this.details.theme }">
            自定义
            <el-color-picker
              v-model="details.theme"
              @change="handlechangeColor"
            ></el-color-picker>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="背景设置">
        <bg-img
          :bgImg="details.bgImageLink"
          @handleBg="handleBg"
          @handleBgDefault="handleBgDefault"
        ></bg-img>
      </el-form-item>
      <el-form-item label="样式设置">
        <div class="style_wrap">
          <div class="style_item">
            <div class="title">边框设置</div>
            <border
              :borderImg="details.contestantBorderStyleLink"
              @handleBorder="handleBorder"
              @handleBorderDefault="handleBorderDefault"
            ></border>
          </div>
          <div class="style_item">
            <div class="title">漂浮物</div>
            <float
              :floatImg="details.floatImageLink"
              @handleFloat="handleFloat"
              @handleFloatDefault="handleFloatDefault"
            ></float>
          </div>
          <div class="style_item">
            <div class="title">背景音乐</div>
            <music
              :musicLink="details.bgMusicLink"
              @handleMusic="handleMusic"
              @handleMusicDefault='handleMusicDefault'
            ></music>
          </div>
        </div>
      </el-form-item>
      <!-- <el-form-item label="边框样式">
        <border
          :borderImg="details.contestantBorderStyleLink"
          @handleBorder="handleBorder"
          @handleBorderDefault="handleBorderDefault"
        ></border>
      </el-form-item>
      <el-form-item label="漂浮物">
        <float
          :floatImg="details.floatImageLink"
          @handleFloat="handleFloat"
          @handleFloatDefault="handleFloatDefault"
        ></float>
      </el-form-item>
      <el-form-item label="背景音乐">
        <music></music>
      </el-form-item> -->
    </el-form>
    <el-dialog
      :visible.sync="centerDialogVisible"
      width="800px"
      center
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      custom-class="temp"
    >
      <div class="temp_box_wrap">
        <ul class="ul_wrap">
          <li
            v-for="(item, index) in tagList"
            :key="index"
            :class="{ active: current == index }"
            @click="handleCickTag(item, index)"
          >
            {{ item.name }}
          </li>
        </ul>
        <div class="temp_content">
          <div class="temp_box">
            <div
              class="temp_item"
              v-for="(item, index) in tempList"
              :key="index"
            >
              <img :src="item.screenshotLink" alt="" />
              <div class="useing">使用中</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { color_list } from "@/utils/data.js";
import bgImg from "./components/bgImg";
import border from "./components/border";
import float from "./components/float";
import music from "./components/music";
export default {
  components: {
    bgImg,
    border,
    float,
    music,
  },
  data() {
    return {
      details: {},
      color_list,
      centerDialogVisible: false,
      query: {
        pageNum: 1,
        pageSize: 10,
        title: "",
        voteCategoryId: "",
      },
      tempList: [],
      tagList: [],
      current: 0,
      img: "",
    };
  },
  computed: {
    ...mapGetters("status", {
      loading: "loading",
    }),
  },
  created() {
    this.getbasicPage();
  },
  methods: {
    handleTemp() {
      this.getTemplateTag();
    },
    getTemplateTag() {
      this.$api("resource.getTemplateTag").then((res) => {
        console.log(res);
        this.tagList = res;
        this.tagList.unshift({ name: "全部", id: "" });
        this.centerDialogVisible = true;
      });
    },
    handleCickTag(item,index){
      console.log(item)
        this.current=index
        this.query.voteCategoryId=item.id
        this.getTemplate()
    },
    getTemplate() {
      this.$api("resource.getTemplate", this.query).then((res) => {
        console.log(res);
        this.tempList = res.data;
        let item = this.tempList.find(
          (item) => item.id == this.details.templateId
        );
        this.img = item.screenshotLink;
      });
    },
    getbasicPage() {
      this.$api("vote.getbasicPage", {
        voteId: this.$route.query.id,
      }).then((res) => {
        this.details = res;
        this.getTemplate();
      });
    },
    //切换活动模板
    handleChangeModel() {
      console.log("切换模板");
    },
    handleChangeMusic() {
      console.log("设置音乐");
    },
    saveApi() {
      console.log(this.details)
      this.$api("vote.savebasicPage", {
        ...this.details,
        voteId: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.$store.commit("status/SET_URL", new Date().getTime());
        this.$message({
          message: "保存成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    handlechangeColor() {
      this.saveApi();
    },
    handleBg(link) {
      this.details.bgImageLink = link;
      this.saveApi();
    },
    handleBgDefault() {
      this.details.bgImageLink = "";
      this.saveApi();
    },
    handleBorder(link) {
      this.details.contestantBorderStyleLink = link;
      this.saveApi();
    },
    handleBorderDefault() {
      this.details.contestantBorderStyleLink = "";
      this.saveApi();
    },
    handleFloat(link) {
      this.details.floatImageLink = link;
      this.saveApi();
    },
    handleMusic(link) {
      this.details.bgMusicLink = link;
      this.saveApi();
    },
    handleFloatDefault() {
      this.details.floatImageLink = "";
      this.saveApi();
    },
    handleMusicDefault(){
      this.details.bgMusicLink = "";
      this.saveApi();
    },
    handleSelectColor(item) {
      this.details.theme = item;
      this.saveApi();
    },
    handleDefaultColor() {
      // this.details.theme = "#FB4723";
       this.details.theme = "";
      this.saveApi();
    },
  },
};
</script>

<style lang="scss" scoped>
.pageset {
  width: 100%;
  min-height: 550px;
  ::v-deep.el-form-item__label {
    padding-right: 30px;
  }
  .common_show_btn {
    display: flex;
    align-items: center;
    .btn_operat {
      margin-left: 40px;
      span {
        display: inline-block;
        padding: 0 10px;
        color: $themeColor;
        cursor: pointer;
      }
    }
  }
  .common_bg {
    position: relative;
    background-color: #f5f5f5;
    cursor: pointer;
    border-radius: 8px;
    .el-image {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      img {
        border-radius: 8px;
      }
    }
    .tips_wrap {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0);
      opacity: 0;
      &:hover {
        opacity: 1;
        background: rgba(0, 0, 0, 0.5);
        .name {
          color: $themeColor;
          font-size: 13px;
        }
      }
    }
  }
  .templateImg {
    width: 185px;
    height: 315px;
  }

  .colorCircle {
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    width: 600px;
    .color_item {
      margin-right: 22px;
      margin-bottom: 22px;
      width: 30px;
      height: 30px;
      border-radius: 100%;
      text-align: center;
      line-height: 30px;
      .el-icon-check {
        color: #fff;
        font-size: 20px;
      }
    }
  }
  .btn_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    width: 600px;
    .btn {
      width: 60px;
      height: 24px;
      color: #fff;
      line-height: 24px;
      background: $themeColor;
      text-align: center;
      border-radius: 4px;
      cursor: pointer;
    }
    .custom {
      position: relative;
      margin-left: 40px;
      ::v-deep.el-color-picker {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        width: 60px;
        height: 24px;
        opacity: 0;
        .el-color-picker__trigger {
          width: 60px;
          height: 24px;
        }
      }
    }
  }
  // .btn {
  //   margin-top: 30px;
  //   display: flex;
  //   justify-content: center;
  //   .el-row {
  //     position: relative;
  //     ::v-deep.el-color-picker {
  //       position: absolute;
  //     }
  //     .el-button {
  //       margin-right: 50px;
  //       width: 80px;
  //       height: 30px;
  //       line-height: 0.5;
  //     }
  //   }
  // }
  ::v-deep.temp {
    margin: 0;
    margin-left: 600px;
    .el-dialog__body {
      padding: 0;
    }
  }
  .temp_box_wrap {
    .ul_wrap {
      display: flex;
      flex-wrap: wrap;
      padding: 0 20px;
      li {
        font-size: 13px;
        margin: 0 10px;
        cursor: pointer;
        padding: 5px 0;
      }
      .active {
        color: $themeColor;
      }
    }
    .temp_content {
      margin-top: 10px;
      height: 510px;
      overflow-y: auto;
      background: #f5f5f5;
      padding: 10px;
      .temp_box {
        display: flex;
        .temp_item {
          width: 205px;
          height: 350px;
          margin-right: 20px;
          margin-bottom: 20px;
          border-radius: 6px;
          font-size: 0;
          position: relative;
          overflow: hidden;
          .useing {
            position: absolute;
            left: -26px;
            top: -7px;
            background-color: #e91611;
            color: #fff;
            z-index: 2;
            font-size: 12px;
            text-align: center;
            padding: 15px 20px 5px 20px;
            transform: rotate(-45deg);
          }
          img {
            border-radius: 6px;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.style_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 200px;
  .style_item {
    width: 140px;

    .title {
      font-size: 13px;
      line-height: 30px;
      color: #999;
      text-align: center;
    }
  }
}
</style>
